<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <link rel="stylesheet" href="https://file.iviewui.com/dev-dist/main.571f0e8d44c31abd00b9.css">
</head>
<body>
<style>
    #login{
        width: 600px;height:700px;margin-left: 1150px;margin-top:110px;
        background: #ffffff;
        box-shadow: 10px 10px 5px 2px #888888;
        font-size: 18px;
        border-radius: 35px
    }
    #a{
        font-size: 18px;
    }
     body
     {
         background-image:url('bg.jpg');
         /*background-repeat:no-repeat;*/
         background-size:cover;
         overflow:hidden;
     }
    .loginwin{
    text-align:center;border-bottom:1px solid #e8eaec;padding-bottom:16px;margin-bottom:32px
    }
</style>
<div id="app" class="index">
    <div class="ivu-card-body" id="login">
        <div class="loginwin">
            <img src=index.png">
                <%--<div class="dev-sign-authorize-title-swap">--%>
                    <%--<i class="ivu-icon ivu-icon-ios-swap" style="font-size: 28px;"></i>--%>
            <br><span>欢迎登录用户管理系统</span>
                <%--</div>--%>
            <%--&lt;%&ndash;padding-bottom: 25px;&ndash;%&gt;--%>
            <%--&lt;%&ndash;padding-top: 25px;&ndash;%&gt;--%>
            <%--&lt;%&ndash;margin-bottom: 30px;&ndash;%&gt;--%>
            <%--<img src="logo1.png">--%>
        </div>
        <form autocomplete="off" class="ivu-form ivu-form-label-top">
        <div class="ivu-form-item ivu-form-item-required">
            <label class="ivu-form-item-label" id="a">用户名</label>
            <div class="ivu-form-item-content">
                <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type">
                    <!----> <!---->
                    <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                    <input autocomplete="off" spellcheck="false" type="text" placeholder="" class="ivu-input ivu-input-large ivu-input-with-prefix">
                    <span class="ivu-input-prefix"><Icon type="md-contact" ></Icon>

                    </span>
                </div> <!----></div>
        </div><div class="ivu-form-item ivu-form-item-required">
        <label class="ivu-form-item-label" id="a">密码</label>
        <div class="ivu-form-item-content">
            <div class="ivu-input-wrapper ivu-input-wrapper-large ivu-input-type"><!---->
                <i class="ivu-icon ivu-icon-ios-eye ivu-input-icon ivu-input-icon-normal"></i> <!---->
                <input autocomplete="off" spellcheck="false" type="password" placeholder="" class="ivu-input ivu-input-large ivu-input-with-prefix"> <span class="ivu-input-prefix">
                    <Icon type="md-lock" ></Icon>
                </span>
            </div> <!---->
        </div>
    </div>
    </form> <div id="vaptcha_container">
        <div class="vp-basic-btn vp-dark-btn vp-default-btn vp-waves" style="background-color: rgb(45, 140, 240);"><div class="vp-btn-bg"></div>
            <div class="vp-basic-cont">
                <div class="vp-shield vp-vertical">
        <span class="vp-vertical-cont">
            <i class="vp-circle-i"></i>
            <!--hover 圆缩放-->
            <span class="vp-circle-h"></span>
        </span>
                    <div class="vp-prompt vp-match"><span class="vp-btn-hover-message"></span>
                        <span class="vp-prompt-triangle"></span></div><div class="vp-prompt vp-safety"><span class="vp-safety-fator"></span>
                    <span class="vp-prompt-triangle"></span></div></div>
                <a class="vp-about vp-vertical" href="https://www.vaptcha.com/" title="了解VAPTCHA" target="_blank" style="display: none;">
        <span class="vp-vertical-cont">
            <i></i>
        </span>
                </a>
               </div>
        </div>
    </div>
        <div class="dev-sign-main-aside"><button type="button" class="ivu-btn ivu-btn-success ivu-btn-long ivu-btn-large"><!---->
            <i class="ivu-icon ivu-icon-md-log-in"></i>
            <span>授权登录到用户管理系统</span></button>
            <div class="dev-sign-main-aside-tip">
                <p><a href="/recover" class="">忘记密码？</a></p>
                <p>尚未拥有账户？ <a href="/signup" class="">注册</a></p>
            </div>
        </div>
    </div>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data(){
            return {
                theme1:'light',
            }
        }
    })
</script>
</body>
</html>


<%--<style scoped>--%>
    <%--.layout{--%>
        <%--border: 1px solid #d7dde4;--%>
        <%--background: #f5f7f9;--%>
        <%--position: relative;--%>
        <%--border-radius: 4px;--%>
        <%--overflow: hidden;--%>
    <%--}--%>
    <%--.layout-logo{--%>
        <%--width: 100px;--%>
        <%--height: 30px;--%>
        <%--background: #5b6270;--%>
        <%--border-radius: 3px;--%>
        <%--float: left;--%>
        <%--position: relative;--%>
        <%--top: 15px;--%>
        <%--left: 20px;--%>
    <%--}--%>
    <%--.layout-nav{--%>
        <%--width: 420px;--%>
        <%--margin: 0 auto;--%>
        <%--margin-right: 20px;--%>
    <%--}--%>
<%--</style>--%>
<%--<div class="layout">--%>
    <%--<Layout>--%>
        <%--<Header>--%>
            <%--<i-Menu mode="horizontal" theme="dark" active-name="1">--%>
                <%--<div class="layout-logo"></div>--%>
                <%--<div class="layout-nav">--%>
                    <%--<Menu-Item name="1">--%>
                        <%--<Icon type="ios-navigate"></Icon>--%>
                        <%--用户界面--%>
                    <%--</Menu-Item>--%>
                    <%--<Menu-Item name="2">--%>
                        <%--<Icon type="ios-keypad"></Icon>--%>
                        <%--Item 2--%>
                    <%--</Menu-Item>--%>
                    <%--<Menu-Item name="3">--%>
                        <%--<Icon type="ios-analytics"></Icon>--%>
                        <%--Item 3--%>
                    <%--</Menu-Item>--%>
                    <%--<Menu-Item name="4">--%>
                        <%--<Icon type="ios-paper"></Icon>--%>
                        <%--Item 4--%>
                    <%--</Menu-Item>--%>
                <%--</div>--%>
            <%--</i-Menu>--%>
        <%--</Header>--%>
        <%--<Layout>--%>
            <%--<Sider hide-trigger :style="{background: '#fff'}">--%>
                <%--<i-Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">--%>
                    <%--<Submenu name="1">--%>
                        <%--<template slot="title">--%>
                            <%--<Icon type="ios-navigate"></Icon>--%>
                            <%--Item 1--%>
                        <%--</template>--%>
                        <%--<Menu-Item name="1-1">Option 1</Menu-Item>--%>
                        <%--<Menu-Item name="1-2">Option 2</Menu-Item>--%>
                        <%--<Menu-Item name="1-3">Option 3</Menu-Item>--%>
                    <%--</Submenu>--%>
                    <%--<Submenu name="2">--%>
                        <%--<template slot="title">--%>
                            <%--<Icon type="ios-keypad"></Icon>--%>
                            <%--Item 2--%>
                        <%--</template>--%>
                        <%--<Menu-Item name="2-1">Option 1</Menu-Item>--%>
                        <%--<Menu-Item name="2-2">Option 2</Menu-Item>--%>
                    <%--</Submenu>--%>
                    <%--<Submenu name="3">--%>
                        <%--<template slot="title">--%>
                            <%--<Icon type="ios-analytics"></Icon>--%>
                            <%--Item 3--%>
                        <%--</template>--%>
                        <%--<Menu-Item name="3-1">Option 1</Menu-Item>--%>
                        <%--<Menu-Item name="3-2">Option 2</Menu-Item>--%>
                    <%--</Submenu>--%>
                <%--</i-Menu>--%>
            <%--</Sider>--%>
            <%--<Layout :style="{padding: '0 24px 24px'}">--%>
                <%--<Breadcrumb :style="{margin: '24px 0'}">--%>
                    <%--<BreadcrumbItem>Home</BreadcrumbItem>--%>
                    <%--<BreadcrumbItem> / Components</BreadcrumbItem>--%>
                    <%--<BreadcrumbItem> / Layout</BreadcrumbItem>--%>
                <%--</Breadcrumb>--%>
                <%--<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">--%>
                    <%--Content--%>
                <%--</Content>--%>
            <%--</Layout>--%>
        <%--</Layout>--%>
    <%--</Layout>--%>
<%--</div>--%>